<template>
  <view class="doctor" @click="handleClick">
    <view class="content">
      <view class="content-positions" v-if="obj.position">
        <u--image src="https://res.jiyaqi.com/pet/miniapp/positions.png" width="24rpx" height="24rpx" mode="aspectFill"></u--image>
        <text style="margin-left: 8rpx">{{ obj.position }}</text>
      </view>
      <view class="content-left">
        <view class="" style="position: relative;">
          <u-avatar class="iamgeRadius" :src="obj.avatar ? obj.avatar : 'https://res.jiyaqi.com/pet/miniapp/public/user.png'"
            size="128rpx" shape="square" mode="aspectFill"></u-avatar>
          <view class="content-left-shoawBox">
            <view class="content-left-shoaw">
              <text>{{ obj.onlineFlag == 1 ? '在线' : '离线' }}</text>
            </view>
          </view>
        </view>
      </view>
      <view class="content-right">
        <view class="lineOne">
          <text class="name">{{ obj.trueName }}</text>
          <view class="office" v-if="obj.offices">{{ obj.offices.split(',')[0] }}医生</view>
        </view>
        <view class="lineTwo">
          <text>执业编号：{{ obj.certNo?obj.certNo:'' }}</text>
        </view>
        <view class="flex lineThree">
          <view>
            <text>问诊数</text>
            <text class="num">{{ obj.treatmentCount ? obj.treatmentCount : 0 }}</text>
          </view>
          <view>
            <text>粉丝数</text>
            <text class="num">{{ obj.fansCount ? obj.fansCount : 0 }}</text>
          </view>
        </view>
      </view>
    </view>
    <view class="titles multi-ellipsis-2" v-if="obj.goodAt">{{ obj.goodAt }}</view>
    <view class="content_bottom" v-if="obj.imInquiryFlag == 1">
      <view class="ask" v-if="obj.imInquiryFlag ==1">
        <text>即时问诊</text>
        <text class="price">¥{{ obj.imInquiryAmount }}</text>
      </view>
      <view class="askDoctor" @click.stop="clickAskDoctor(obj)">向TA问诊</view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'JyqTalailaCFamousDoctor',
  props: {
    obj: {
      type: Object,
      default () {
        return {};
      }
    }
  },
  methods: {
    clickAskDoctor (obj) {
      this.$emit('clickAskDoctor', obj);
    },
    handleClick () {
      this.$emit('click')
    }
  }
};
</script>

<style lang="scss" scoped>
.flex {
  display: flex;
}
.doctor {
  margin: 0rpx 24rpx 16rpx;
  background: #fff;
  border-radius: 20rpx;
  padding: 24rpx;
  .content {
    position: relative;
    display: flex;
    &-positions {
      display: flex;
      position: absolute;
      right: -24rpx;
      top: -24rpx;
      padding: 12rpx 22rpx;
      box-sizing: border-box;
      font-size: 24rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #ff870f;
      line-height: 24rpx;
      background: rgba($color: #ff870f, $alpha: 0.1);
      border-radius: 0px 20rpx 0px 20rpx;
    }
    .content-left {
      position: relative;
      // padding: 15px;
      .iamgeRadius {
        overflow: hidden;
      }
      .content-left-shoawBox {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 128rpx;
        height: 128rpx;
        border-radius: 0 0 12rpx 12rpx;
        overflow: hidden;
        .content-left-shoaw {
          width: 100%;
          height: 40rpx;
          background-color: rgba(0, 0, 0, 0.2);
          display: flex;
          justify-content: center;
          align-items: center;

          text {
            font-size: 20rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #ffffff;
            line-height: 20rpx;
          }
        }
      }
    }
    .content-right {
      padding-left: 28rpx;
      .lineOne,
      .lineTwo,
      .lineThree {
        display: flex;
        align-items: center;
        margin-top: 16rpx;
        font-size: 24rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #666666;
        line-height: 24rpx;
        .num {
          color: #ff870f;
          margin: 0 32rpx 0 12rpx;
          font-size: 24rpx;
          font-weight: 600 !important;
        }
        .name {
          font-size: 32rpx;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #1a1a1a;
          line-height: 32rpx;
        }
        .office {
          display: flex;
          align-items: center;
          margin-left: 12rpx;
          padding: 0 12rpx;
          height: 32rpx;
          font-size: 22rpx;
          line-height: 22rpx;
          font-weight: 500;
          color: #FF5900;
          border-radius: 6rpx;
          font-family: PingFangSC-Medium, PingFang SC;
          background: rgba($color: #FF5900, $alpha: 0.1);
        }
      }
      .lineOne {
        margin-top: 8rpx;
      }
    }
  }
  .titles {
    margin-top: 24rpx;
    font-size: 24rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
    line-height: 32rpx;
  }
  .content_bottom {
    margin-top: 24rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .ask {
      font-size: 24rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #1a1a1a;
      line-height: 24rpx;
      .price {
        margin-left: 12rpx;
        font-size: 32rpx;
        font-family: DIN-Medium, DIN;
        font-weight: 500;
        color: #ff870f;
        line-height: 32rpx;
      }
    }

    .askDoctor {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 168rpx;
      height: 56rpx;
      color: #FF5900;
      background: rgba($color: #FF5900, $alpha: 0.1);
      border-radius: 28rpx;
      font-size: 24rpx;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
    }
  }
}
</style>
